

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>采购单主表</title>
    <link rel="stylesheet" href="../../static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../static/style/admin.css" media="all">
</head>
<style>
    .box1 {
        position: relative;
        float: left;
        top: 10px;
        left: 10px;
        width: 25%;
        height: 700px;
        background: #ffffff;
    }

    .box2 {
        position: relative;
        float: left;
        top: 10px;
        left: 20px;
        width: 72%;
        height: 700px;
        background: #ffffff;
    }

    .panel-window {
        position: relative;
        top: -25px;
        padding: 10px;
        border-radius: 0;
        border-top: 5px solid #FFFFFF;
        background-color: #fff
    }
</style>
<body>

<div class="box1">
    <blockquote class="layui-elem-quote" style="background: #ffffff">采购单主表</blockquote>
    <div style="position: relative;left: 30px">
        <div class="layui-inline">
            <input type="search" name="search" lay-verify="title" autocomplete="off" placeholder="请输入关键字"
                   class="layui-input layui-input-search" id="selectmain">
        </div>
        <div class="layui-inline">
            <button class="layui-btn layui-btn-sm layui-btn-radius" lay-event="searchmain"><i
                    class="layui-icon layui-icon-search"
                    style="font-size: 8px; "></i> 搜索
            </button>
        </div>
    </div>
    <!--表格-->
    <div class="layui-card-body">
        <table class="layui-hide" id="backstockmain" lay-filter="testmain"></table>
    </div>
    <!--行操作栏-->
    <script type="text/html" id="mainbarDemo">
        <a class="layui-btn layui-btn-xs layui-btn-radius" lay-event="editmain">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-radius" lay-event="delmain">删除</a>
    </script>
</div>

<div class="box2">
    <blockquote class="layui-elem-quote" style="background: #ffffff">采购单明细</blockquote>
    <script type="text/html" id="toolbar">
        <div class="layui-inline">
            <input type="search" name="search" lay-verify="title" autocomplete="off" placeholder="请输入关键字"
                   class="layui-input layui-input-search" id="selectdetail">
        </div>
        <button class="layui-btn layui-btn-sm layui-btn-radius" lay-event="searchdetail"><i
                class="layui-icon layui-icon-search"
                style="font-size: 8px; "></i> 搜索
        </button>
        <button class="layui-btn layui-btn-sm layui-btn-radius" lay-event="adddetail"><i
                class="layui-icon layui-icon-addition"
                style="font-size: 8px; "></i>新增
        </button>
    </script>

    <!--表格-->
    <div class="layui-card panel-window">
        <table class="layui-hide" id="backstockdetail" lay-filter="testdetail"></table>
    </div>
    <!--行操作栏-->
    <script type="text/html" id="detailbarDemo">
        <a class="layui-btn layui-btn-xs layui-btn-radius" lay-event="editdetail">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-radius" lay-event="deldetail">删除</a>
    </script>
</div>
<script src="../../../static/layui/layui.js"></script>
<script>
    //退库单主表
    layui.use(['table', 'element', 'jquery'], function () {
        table = layui.table;
        var $ = layui.$;
        table.render({
            elem: '#backstockmain',
            url: '/buy/queryBuyorder',
            title: '采购单主表',
            contentType: 'application/json',
            method: 'post',
            cols: [
                [
                    {field: 'id', title: 'ID', fixed: 'left', unresize: true, sort: true, align: 'center'}
                    , {field: 'buyorderid', title: '采购编号',  edit: 'text', align: 'center'}
                    , {field: 'deptid', title: '部门名', edit: 'text',  align: 'center', templet: function (d) {
                        switch (d.deptid) {
                            case "001":
                                return d = "管理部";
                                break;
                            case "002":
                                return d = "采购部";
                                break;
                            case "003":
                                return d = "销售部";
                                break;
                            case "004":
                                return d = "库存部";
                                break;
                            case "005":
                                return d = "财务部";
                                break;
                        }
                    }}
                    , {field: 'supplierid', title: '供应商',  edit: 'text', align: 'center'}
                    , {field: 'employeeid', title: '合同主要负责人',  edit: 'text', align: 'center'}
                ]
            ],
            size: 'lg'
        });
    });

</script>
<script th:inline="none">
    //退库单明细表
    layui.use(['table', 'element', 'jquery'], function () {
        table = layui.table;
        var $ = layui.$;
        table.render({
            elem: '#backstockdetail',
            url: '/buy/queryBuyorderDetail',
            title: '采购明细表',
            contentType: 'application/json',
            method: 'post',
            page: true, //开启分页,
            toolbar: '#toolbar', //开启工具栏，此处显示默认图标，可以自定义模板，详见文档,
            cols: [
                [
                    {field: 'buyorderid', title: '进货号', edit: 'text', align: 'center'}
                    , {field: 'productid', title: '商品编号', edit: 'text', align: 'center'}
                    , {field: 'quantity', title: '主数量', edit: 'text', align: 'center'}
                    , {field: 'pumain', title: '主计量单位', edit: 'text', align: 'center'}
                    , {field: 'quantity_assist', title: '辅数量', edit: 'text', align: 'center'}
                    , {field: 'puasist', title: '辅计量单位', edit: 'text', align: 'center'}
                    , {field: 'price', title: '参考价格', edit: 'text', align: 'center'}
                    , {field: 'createid', title: '创建人', edit: 'text', align: 'center'}
                    , {field: 'examineid', title: '审核人', edit: 'text', align: 'center'}
                    , {
                    field: 'status', title: '审核状态', edit: 'text', align: 'center', templet: function (d) {
                        return d.status == '1' ? '已审核' : '未审核'
                    }
                }
                    , {fixed: 'right', title: '操作', toolbar: '#detailbarDemo', width: 140, align: 'center'}
                ]
            ],
            size: 'lg'
        });
        //监听行工具事件
        table.on('tool(testdetail)', function (obj) {
            //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值

            if (layEvent === 'deldetail') {
                layer.confirm('你确定要删除吗？', {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    $.ajax({
                        url: '/buy/deleteBuyorderDetail',
                        type: 'get',
                        data: 'buyorderid=' + data.buyorderid,
                        success: function (data) {
                            if (data.code === 200) {
                                // 删除成功
                                layer.msg('删除成功', {icon: 1});
                                // 表格重载
                                table.reload('backstockdetail', {});
                            } else {
                                layer.msg('删除失败', {icon: 2});
                            }
                        }
                    })
                }, function () {
                    // 取消
                    layer.msg("取消删除", {icon: 7})
                });
            } else if (layEvent === 'editdetail') {
                //免加载页面弹窗
                Comment(data, "编辑")
            }
        });

        //触发事件
        table.on('toolbar(testdetail)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            if (obj.event === 'adddetail') {
                var detaildata = {
                    "buyorderid": "",
                    "productid": "",
                    "quantity": "",
                    "pumain": "",
                    "quantity_assist": "",
                    "puasist": "",
                    "price": "",
                    "createid": "",
                    "employeeid": "",
                    "status": "",
                };
                Comment(detaildata, "添加");
            } else if (obj.event === 'searchdetail') {

                // 获取到搜索框的内容
                var search = $("#selectdetail").val();

                // 表格重载
                table.reload('backstockdetail', {
                    url: '/buy/queryBuyorderDetail',
                    where: {
                        'queryString': search
                    }
                })
            }
        });
    });

    /**
     * 编辑和添加功能
     * @param {Object} user 用户数据
     * @param features 功能
     */
    function Comment(detail, featuredetail) {
        layui.use(['layer', 'laytpl'], function () {
            var $ = layui.$;//重点处,layui有内置jquery模块
            var layer = layui.layer, laytpl = layui.laytpl;
            //给模板 tpl-user 传递参数
            var detaildata = {
                "featuredetail": featuredetail,
                "buyorderid": detail.buyorderid,
                "productid": detail.productid,
                "quantity": detail.quantity,
                "pumain": detail.pumain,
                "quantity_assist": detail.quantity_assist,
                "puasist": detail.puasist,
                "price": detail.price,
                "createid": detail.createid,
                "employeeid": detail.employeeid,
                "status": detail.status
            };
            //获取id为tpl-user的noscript标签的html内容,不能使用innerHtml
            laytpl(document.getElementById('detail-id').innerText)
                .render(detaildata, function (html) {
                    //渲染完成后直接打开
                    layer.open({
                        type: 1,
                        shade: false,
                        area: ['70%', '70%', 'auto'],
                        title: false, //不显示标题
                        content: html,
                    });
                });
        });
    }

    /**
     * 删除功能
     * @param id 删除者id
     */
    function deleteComment(buyorderid) {
        console.log(buyorderid);
        layer.confirm('你确定要删除吗？', {
            btn: ['确定', '取消'] //按钮
        }, function () {
            layer.msg('删除成功', {icon: 1});
        }, function () {

        })
    }

</script>
</body>
<noscript id="detail-id">
    <!-- style 尽量不要影响到页面其他元素,使用#userinfo范围限定 -->
    <style type="text/css">
        #detailinfo .layui-form-label.layui-required:after {
            content: "*";
            color: red;
            position: absolute;
            top: 10px;
            right: 5px;
        }
    </style>
    <div class="layui-card" id="detailinfo">
        <div class="layui-card-header">{{d.featuredetail}}</div>
        <div class="layui-card-body">
            <form class="layui-form" action="" lay-filter="info">
                <div class="layui-form-item">
                    <label class="layui-form-label layui-required">退库单编号</label>
                    <div class="layui-input-block">
                        <input type="text" name="buyorderid" lay-verify="required" lay-reqtext="退库单编号是必填项"
                               placeholder="请输入退库单编号"
                               autocomplete="off" value="{{d.buyorderid}}" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label layui-required">商品编号</label>
                    <div class="layui-input-block">
                        <input type="text" name="productid" lay-verify="required" lay-reqtext="商品编号是必填项"
                               placeholder="请输入商品编号"
                               autocomplete="off" value="{{d.productid}}" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label layui-required">主数量</label>
                    <div class="layui-input-block">
                        <input type="text" name="quantity" lay-verify="required" lay-reqtext="主数量是必填项"
                               placeholder="请输入主数量"
                               autocomplete="off" value="{{d.quantity}}" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label layui-required">主计量单位</label>
                    <div class="layui-input-block">
                        <input type="text" name="pumain" lay-verify="required" lay-reqtext="主计量单位是必填项"
                               placeholder="请输入主计量单位"
                               autocomplete="off" value="{{d.pumain}}" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label layui-required">辅数量</label>
                    <div class="layui-input-block">
                        <input type="text" name="quantity_assist" lay-verify="required" lay-reqtext="辅数量是必填项"
                               placeholder="请输入辅数量"
                               autocomplete="off" value="{{d.quantity_assist}}" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label layui-required">辅计量单位</label>
                    <div class="layui-input-block">
                        <input type="text" name="puasist" lay-verify="required" lay-reqtext="辅计量单位是必填项"
                               placeholder="请输入辅计量单位"
                               autocomplete="off" value="{{d.puasist}}" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label layui-required">参考价格</label>
                    <div class="layui-input-block">
                        <input type="text" name="price" lay-verify="required" lay-reqtext="参考价格是必填项"
                               placeholder="请输入参考价格"
                               autocomplete="off" value="{{d.price}}" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="submit" class="layui-btn tt layui-btn-radius " lay-submit="" lay-filter="demo1">
                            立即提交
                        </button>
                        <button type="submit" class="layui-btn tt layui-btn-radius " lay-submit="" lay-filter="examine">
                            审核
                        </button>
                        <button type="submit" class="layui-btn tt layui-btn-radius " lay-submit="" lay-filter="unexamine">
                            弃审
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary layui-btn-radius">重置</button>
                    </div>
                </div>
            </form>
            <script>
                layui.use(['jquery', 'form'], function () {
                    var $ = layui.$;
                    var form = layui.form, layer = layui.layer, laydate = layui.laydate;
                    form.verify({
                        contentRule: function (value) {
                            if (value.length < 5) {
                                return '至少得5个字符啊';
                            }
                        }
                    });
                    form.on('submit(demo1)', function (data) {
                        /* layer.alert(JSON.stringify(data.field), {
                             title: '用户id为:{{d.user_id}}的提交信息'
                         });
                         /**可以在ajax 地址中,传入user_id参数*/
                        if ("{{d.featuredetail}}" === "添加") {
                            console.log("退库明细添加");
                            $.ajax({
                                url: '/buy/addBuyorderDetail',
                                type: 'POST',
                                dataType: 'json',
                                contentType: 'application/json;charset=UTF-8',
                                data: JSON.stringify(data.field),
                                success: function (data) {
                                    console.log(data);
                                    if (data.code === 200) {
                                        layer.msg("添加成功", {icon: 1})
                                    } else {
                                        layer.msg("添加失败", {icon: 2})
                                    }
                                    layer.closeAll();
                                }
                            });
                        } else {
                            data.field['id'] = "{{d.id}}";
                            console.log(data.field);
                            $.ajax({
                                url: '/buy/editBuyorderDetail',
                                type: 'POST',
                                dataType: 'json',
                                contentType: 'application/json;charset=UTF-8',
                                data: JSON.stringify(data.field),
                                success: function (data) {
                                    console.log(data);
                                    if (data.code === 200) {
                                        layer.msg("编辑成功", {icon: 1})
                                    } else {
                                        layer.msg("编辑失败", {icon: 2})
                                    }
                                    layer.closeAll();
                                }
                            });
                        }
                    });
                    form.on('submit(examine)', function (data) {
                        /* layer.alert(JSON.stringify(data.field), {
                             title: '用户id为:{{d.user_id}}的提交信息'
                         });
                         /**可以在ajax 地址中,传入user_id参数*/
                        data.field['id'] = "{{d.id}}";
                        console.log(data.field);
                        $.ajax({
                            url: '/buy/examineBuyorderDetail',
                            type: 'POST',
                            dataType: 'json',
                            contentType: 'application/json;charset=UTF-8',
                            data: JSON.stringify(data.field),
                            success: function (data) {
                                console.log(data);
                                if (data.code === 200) {
                                    layer.msg("审核成功", {icon: 1})
                                } else {
                                    layer.msg("审核失败", {icon: 2})
                                }
                                layer.closeAll();
                            }
                        });
                    });
                    form.on('submit(unexamine)', function (data) {
                        /* layer.alert(JSON.stringify(data.field), {
                             title: '用户id为:{{d.user_id}}的提交信息'
                         });
                         /**可以在ajax 地址中,传入user_id参数*/
                        data.field['id'] = "{{d.id}}";
                        console.log(data.field);
                        $.ajax({
                            url: '/buy/unexamineBuyorderDetail',
                            type: 'POST',
                            dataType: 'json',
                            contentType: 'application/json;charset=UTF-8',
                            data: JSON.stringify(data.field),
                            success: function (data) {
                                console.log(data);
                                if (data.code === 200) {
                                    layer.msg("弃审成功", {icon: 1})
                                } else {
                                    layer.msg("弃审失败", {icon: 2})
                                }
                                layer.closeAll();
                            }
                        });
                    });
                    /** 要使用render,复杂表单才能显示 */
                    form.render();
                });
            </script>
        </div>
    </div>
</noscript>
</html>
